<template>
  <div class="table">
            <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="container-title-p">
                    财务数据
                    <i class="iconfont icon-jiantou"></i>
                  </span>
                  <span>虚拟币账单流水</span>
                  </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-select v-model="select_country" placeholder="筛选国家" clearable  class="handle-select mr10" size='small'>
                <el-option label="美国" value="0"></el-option>
                <el-option v-for="(type_item,index) in countryCenter" :key="index" :label="type_item.a_type_name" :value="type_item.a_tid"></el-option>
            </el-select>

            <el-select v-model="select_ordertype" placeholder="筛选交易类型" clearable  class="handle-select mr10" size='small'>
                <el-option label="充值" value="0"></el-option>
                <el-option label="提现" value="1"></el-option>
                <el-option v-for="(type_item,index) in typeCenter" :key="index" :label="type_item.a_type_name" :value="type_item.a_tid"></el-option>
            </el-select>

            <el-select v-model="select_cointype" placeholder="筛选虚拟币类型" clearable  class="handle-select mr10" size='small'>
                <el-option label="比特币" value="0"></el-option>
                <el-option label="以太坊" value="1"></el-option>
                <el-option label="华克金" value="2"></el-option>
                <el-option v-for="(type_item,index) in coinTypeCenter" :key="index" :label="type_item.a_type_name" :value="type_item.a_tid"></el-option>
            </el-select>

            <el-date-picker class="handle-date" v-model="select_date" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="交易开始日期" end-placeholder="交易结束日期" :picker-options="orderDatePicker">
            </el-date-picker>

            <el-select v-model="select_orderstatus" placeholder="筛选账单确认状态" clearable  class="handle-select mr10" size='small'>
                <el-option label="成功" value="0"></el-option>
                <el-option label="确认中" value="1"></el-option>
                <el-option label="失败" value="2"></el-option>
                <el-option v-for="(type_item,index) in orderStatusCenter" :key="index" :label="type_item.a_type_name" :value="type_item.a_tid"></el-option>
            </el-select>

            <el-button type="primary" icon="el-icon-search" class="handle-btn" @click="getData" size="small">搜索</el-button>

        </div>

        <div class="handle-box" id="charts-main" style="height:600px;"></div>

        
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      select_date: "",
      orderDatePicker: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      select_country: "",
      countryCenter: [],
      select_ordertype: "",
      typeCenter: [],
      select_cointype: "",
      coinTypeCenter: [],
      select_orderstatus: "",
      orderStatusCenter: []
    };
  },
  mounted() {
    var myChart = echarts.init(document.getElementById("charts-main"));
    var option = {
      title: {
        text: "虚拟币账单流水折线图"
      },
      tooltip: {
        trigger: "axis"
      },
      legend: {
        data: [
          "充值-比特币",
          "充值-以太坊",
          "充值-华克金",
          "提现-比特币",
          "提现-以太坊",
          "提现-华克金"
        ]
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "2018-02-27",
          "2018-03-06",
          "2018-03-13",
          "2018-03-20",
          "2018-03-27",
          "2018-04-03",
          "2018-04-10"
        ]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          name: "充值-比特币",
          type: "line",
          stack: "总量",
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: "充值-以太坊",
          type: "line",
          stack: "总量",
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: "充值-华克金",
          type: "line",
          stack: "总量",
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: "提现-比特币",
          type: "line",
          stack: "总量",
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: "提现-以太坊",
          type: "line",
          stack: "总量",
          data: [340, 362, 331, 324, 340, 320, 350]
        },
        {
          name: "提现-华克金",
          type: "line",
          stack: "总量",
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    };
    // 绘制图表
    myChart.setOption(option);
  },
  methods: {
    getData() {}
  }
};
</script>
<style scoped>
.handle-select {
  width: 200px;
  margin: 0 5px 10px 0;
}
.handle-date {
  width: 400px;
  height: 30px;
  display: inline-block;
  vertical-align: top;
  margin: 0 5px 20px 0;
}
.handle-btn {
  vertical-align: top;
}
</style>
